<template>
  <div>
    <div class="header">
      <div class="bg"></div>
      <div class="user">
        <div class="photo">
          <van-image round width="6rem" height="6rem" :src="userInfo.userFace" @click="toUserDetail" />
        </div>
        <div class="name">{{ userInfo.username }}</div>
        <div class="flag">我爱吃，多吃不胖！</div>
        <div class="bottom">
          <!-- 用户余额 -->
          <div class="left">
            <p>账户余额</p>
            <p>{{ userInfo.balance }}元</p>
          </div>
          <div class="right">
            <van-button round class="btn" @click="openMonenyPanel">充值</van-button>
          </div>
        </div>
      </div>
    </div>
    <div class="optionBody">
      <van-cell title="常用地址" is-link class="spanTitle" @click="toAddress" icon="location-o"></van-cell>
      <van-cell title="联系我们" is-link class="spanTitle" icon="phone-o" @click="toLianxi" />
      <van-cell title="留言列表" is-link class="spanTitle" icon="orders-o" @click="toComments(userInfo.id)" />
    </div>
    <div class="logout_btn">
      <van-button round block class="logoutBtn" @click="openLogoutPanel">退出登录</van-button>
    </div>

    <!-- 充值面板 -->
    <van-action-sheet v-model="show" title="充值">
      <div class="content">
        <van-field v-model="subMoney" label="充值金额" placeholder="请输入充值金额" />
        <div style="margin: 16px">
          <van-button round block @click="submitMoney" class="subBtn">提交</van-button>
        </div>
      </div>
    </van-action-sheet>
  </div>
</template>

<script>
  import {
    get
  } from "@/http/axios";
  import {
    mapActions,
    mapState
  } from "vuex";
  export default {
    data() {
      return {
        show: false,
        //   充值金额
        subMoney: "",
        //   successSubmit:"",
      };
    },
    computed: {
      // 引入用户信息对象
      ...mapState("user", ["userInfo"]),
    },
    methods: {
      // 引入用户数据
      ...mapActions("user", ["getUserInfo"]),
      // 查询用户信息
      queryUser() {
        this.getUserInfo();
      },
      // 打开充值面板
      openMonenyPanel() {
        this.show = true;
      },
      // 提交金额
      async submitMoney() {
        let data = {
          customerId: this.userInfo.id,
          money: this.subMoney,
        };
        let res = await get("/account/recharge", data);
        this.queryUser();
        this.$notify({
          type: "success",
          message: res.data.message
        });
        this.show = false;
        this.subMoney="";
      },
      // 打开退出登录面板
      openLogoutPanel() {
        this.$dialog
          .confirm({
            message: "是否退出登录",
          })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {});
      },
      // 跳转到地址页面
      toAddress() {
        this.$router.push("address");
      },
      // 跳转到联系页面
      toLianxi() {
        this.$router.push("lianxi");
      },
      //跳转到信息页面
      toUserDetail() {
        this.$router.push("mydetail");
      },
      // 跳转到我的咨询评论列表
      toComments(id) {
        // this.$router.push("pinglun");
        this.$router.push({
          path: "pinglun",
          query: {
            id: id,
          },
        });
      }
    },
    created() {
      this.queryUser();
    },
  };
</script>

<style scoped>
  .bg {
    height: 180px;
    background-image: linear-gradient(-20deg, #ddd6f3 0%, #faaca8 100%, #faaca8 100%);
    border-bottom-left-radius: 50%;
    border-bottom-right-radius: 50%;
  }

  .user {
    width: 80%;
    height: 170px;
    background-color: rgb(255, 255, 255);
    position: absolute;
    top: 170px;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0.8;
    box-shadow: rgb(204 204 204) 0px 0px 10px;
    border-radius: 8px;
    padding: 0px 1em;
  }

  .user .photo {
    width: 95px;
    height: 95px;
    border-radius: 50%;
    background-color: rgb(191, 115, 255);
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .user .flag {
    color: #ccc;
    font-size: 12px;
    text-align: center;
  }

  .user .name {
    margin-top: 3.5em;
    text-align: center;
  }

  .user .bottom {
    display: flex;
    justify-content: space-around;
  }

  .user .bottom .left p:first-child {
    margin-top: 15px;
    font-size: 16px;
    color: rgb(153, 153, 153);
  }

  .user .bottom .left p:last-child {
    font-size: 22px;
    margin-top: -10px;
    color: #F4B4B6;
  }

  .user .bottom .btn {
    background-image: linear-gradient(-20deg, #ddd6f3 0%, #faaca8 100%, #faaca8 100%);
    color: #fff;
    margin-top: 20px;
  }

  .subBtn {
    color: white;
    /* background: rgb(120, 121, 255);
  border-color: rgb(120, 121, 255); */
    background-color: #F4B4B6;
  }

  .user .bottom .content {
    height: 120px;
  }

  .optionBody {
    margin: 130px auto;
    box-shadow: rgb(158 117 255 / 20%) 4px 4px 4px 0px;
    transition: all 0.3s ease 0s;
    width: 95%;
    border-radius: 5px;
  }

  .optionBody .spanTitle {
    font-size: 16px;
    color: rgb(99, 99, 99);
  }

  .logout_btn {
    width: 53%;
    height: 40px;
    text-align: center;
    border-radius: 22px;
    line-height: 40px;
    margin: 2em auto 0px;
  }

  .logoutBtn {
    background-image: linear-gradient(-20deg, #ddd6f3 0%, #faaca8 100%, #faaca8 100%);
    color: rgb(255, 255, 255);
    font-size: 16px;
  }

  .van-cell__left-icon {
    margin-right: 8px;
    font-size: 22px;
    color: #F4B4B6;
  }
</style>